import { GLTFLoader } from "bmap-three/examples/jsm/loaders/GLTFLoader";
import { FBXLoader } from "bmap-three/examples/jsm/loaders/FBXLoader";

import {
  EffectModelPoint,
  ClusterPoint,
  FanPoint,
  GeoJSONDataSource,
} from "mapv-three";
const gltfLoader = new GLTFLoader();
const fbxLoader = new FBXLoader();

export const center = [113.013863,28.120086];
export const arrCs =[
    {
      lon: 113.013876,
      lat: 28.120062,
    },
    {
      lon: 113.015452,
      lat: 28.119389,
    },
    {
      lon: 113.014626,
      lat: 28.11729,
    },
    {
      lon: 113.012982,
      lat: 28.117648,
    },
    {
        lon: 113.013876,
        lat: 28.120062,
      },
  ];


const loadgtf = (engines) => {
  const glbObj = [
    {
      url: "/bpi/worker/lou.FBX",

      data: [
        {
          position: [113.014101, 28.118636, 0],
          scale: [8, 8, 3],
        },
        {
          position: [113.013054, 28.116573, 0],
          scale: [1, 1, 1],
        },
      ],
    },
    {
      url: "http://bj.bcebos.com/v1/mapopen/api-demos/model/building5.glb",
      data: [
        {
          position: [113.011697, 28.116784, 0],
          scale: [1, 1, 1],
        },
      ],
    },
  ];

  glbObj.forEach((item) => {
    updateGltf(item, engines.value);
  });
};

export const updateGltf = (datas, engine) => {
  const { url, data } = datas;
  gltfLoader.load(url, async function (gltf) {
    console.log(gltf);

    const model = gltf.scene.children[0];

    data.forEach((item) => {
      const { position, scale } = item;

      const ps = [...position];
      const pos = engine.map.projectPointArr(ps);
      const instance = model.clone();
      //instance.rotation.x = Math.PI * -0.5;
     // instance.rotation.y = Math.PI * -0.58;
      instance.position.set(...pos);

      instance.scale.set(...scale);

      engine.add(instance);
    });
  });
};

export const updateFbx = (datas, engine) => {
    const { url, data } = datas;
    console.log(url,data)
    fbxLoader.load(url, async function (gltf) {
      console.log(gltf);
  
      const model = gltf.children[0]
  
      data.forEach((item) => {

        const { position, scale } = item;
        const ps = [...position];
        const pos = engine.map.projectPointArr(ps);
        const instance = model.clone();
        instance.position.set(...pos);
       // instance.rotation.y = Math.PI * -0.58;
        instance.rotation.x = Math.PI *0;
         //instance.rotation.z = Math.PI * 0.2;
        instance.scale.set(...scale);
        engine.add(instance);
      });
    });
  };
  
  export const updateFbxCallBack = (datas, ) => {
    const { url, data } = datas;
    console.log(url,data)
    fbxLoader.load(url, async function (gltf) {
      console.log(gltf);
  
      const model = gltf.children[0]
      
  
      data.forEach((item) => {

        const { position, scale } = item;
        const ps = [...position];
        const pos = engine.map.projectPointArr(ps);
        const instance = model.clone();
        instance.position.set(...pos);
       // instance.rotation.y = Math.PI * -0.58;
        instance.rotation.x = Math.PI *0;
         //instance.rotation.z = Math.PI * 0.2;
        instance.scale.set(...scale);
        engine.add(instance);
      });
    });
  };
  

export const shan = async (engine) => {
  const instance = engine.add(
    new FanPoint({
      color: "yellow", // 颜色
      height: 100, // 高度
      size: 100, // 尺寸
      opacity: 0.5, // 透明度
    })
  );
  let dataSource = await GeoJSONDataSource.fromGeoJSON(center, 0.01, 100);
  instance.dataSource = dataSource;
};
